<template>
  <div class="container">
<!--    <div v-for="(item, index) in color" :style="{ background: item }">{{ index }}</div>-->
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div><span>4.1</span><span>4.2</span></div>
<!--    <div>4</div>-->
  </div>
</template>

<script>
  export default {
    name: "gird",
    data() {
      return {
        color: ['blue', 'pink', 'red', 'gray', 'white', 'yellow', 'green', 'purple', 'orange']
      }
    }
  }
</script>
<style>

  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  body {
    /*overflow-x: hidden;*/
  }
  ::-webkit-scrollbar {
    width: 5px;
    height: 6px;
  }
  ::-webkit-scrollbar-thumb {
    height: 90px;
    background: rgb(94, 102, 115);
    border-radius: 3px;
  }
  ::-webkit-scrollbar-track {
    border-radius: 0px;
    background: rgba(0, 0, 0, 0.05);
  }
</style>
<style lang="scss" scoped>

  .container {
    width: 100%;
    height: 100vh;
    display: grid;
    grid-template-columns: 1fr 288px;
    grid-template-rows: 64px 84px minmax(993px, 1fr);
    grid-template-areas:
      "header header"
      "subheader orderform"
      "content orderform";
    gap: 2px;
    margin: 0;
    div:nth-child(1) {
      background: black;
      grid-area: header / header / header / header;
    }
    div:nth-child(2) {
      background: gray;
      grid-area: subheader / subheader / subheader / subheader;
    }
    div:nth-child(3) {
      background: pink;
      grid-area: content / content / content / content;
    }
    div:nth-child(4) {
      background: green;
      grid-area: orderform / orderform / orderform / orderform;
      display: flex;
      justify-content: space-between;
    }
  }
</style>